<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		#canvas{
			box-shadow: 0 5px 40px black;
			position: absolute;
			top: 50%;left: 50%;
			margin-top: -250px;
			margin-left: -400px;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="800" height="500"></canvas>
	
	<script>
		var canvas = document.getElementById('canvas'),
				context = canvas.getContext('2d'),
				centerX = canvas.width,
				centerY = canvas.height;
		
		/** 画方块 **/
		class Box{
			constructor(x, y, w, h, color) {
			  this.x = x;
				this.y = y;
				this.w = w;
				this.h = h;
				this.color = color;
			}
			draw(context){
				context.save();
				context.beginPath();
				context.fillStyle = this.color;
				context.strokeStyle = this.color;
				context.fillRect(this.x, this.y, this.w, this.h);
				context.closePath();
				context.stroke();
			}
		}
		/** 食物 **/
		class Food extends Box{
			constructor(x, y, w, h, color) {
			  super(x, y, w, h, color);
				this.x = this.randomNumBoth(0,40)*20;
				this.y = this.randomNumBoth(0,25)*20;
				this.w = 20;this.h = 20;
				this.color = this.randomColor(40,180);
			}
			randomColor(min, max){
				let r = this.randomNumBoth(min, max);
				let g = this.randomNumBoth(min, max);
				let b = this.randomNumBoth(min, max);
				return "rgb("+r+","+g+","+b+")";
			}
			//随机范围
			randomNumBoth(Min,Max){
			  var Range = Max - Min;
			  var Rand = Math.random();
			  var num = Min + Math.round(Rand * Range); //四舍五入
			  return num;
			}
		}
		let food = new Food();
		
		//  ↑：38 ↓：40  ←：37  →：39
		/** 蛇的类 **/
		class Snake{
			constructor() {
			  this.snakeArr = [];
				for(let i=0;i<4;i++){
					let rect = new Box(i*20, 0, 20, 20, '#1E9FFF');
					this.snakeArr.splice(0, 0, rect);  //从头开始加
				}
				this.snakeArr[0].color = '#FF5722';
				this.head = this.snakeArr[0];  //蛇头
				this.direction = 39;  //设置初始位置向右
			}
			draw(context){
				for(let i=0; i<this.snakeArr.length; i++){
					this.snakeArr[i].draw(context);
				}
			}
			move(){
				let rect = new Box(this.head.x, this.head.y, this.head.w, this.head.h, '#1E9FFF');
				this.snakeArr.splice(1,0,rect);
				
				if(this.isEat(this.head.x, food.x, this.head.y, food.y)){
					food = new Food();
				}else{
					this.snakeArr.pop();
				}
				
				switch(this.direction){
					case 37:  //←
						this.head.x -= this.head.w;
						break;
					case 38:  //↑
						this.head.y -= this.head.h;
						break;
					case 39:  //→
						this.head.x += this.head.w;
						break;
					case 40:  //↓
						this.head.y += this.head.h;
						break;
				}
				//撞墙判断
				if((this.head.x+20) > centerX || this.head.x < 0 || (this.head.y+20) > centerY || this.head.y < 0){
					clearInterval(timer);
					alert('结束');
				}
				//撞自己判断
				for(let i=1;i<this.snakeArr.length;i++){
					if(this.snakeArr[i].x == this.head.x && this.snakeArr[i].y == this.head.y){
						clearInterval(timer);
					}
				}
				
			}
			isEat(x1,x2,y1,y2){
				if(x1==x2 && y1==y2){
					return true;
				}else{
					return false;
				}
			}
		}
		
		let snake = new Snake();
		
		var timer = setInterval(function(){
			context.clearRect(0,0,centerX,centerY);
			food.draw(context);
			snake.move();
			snake.draw(context);
		},200);
		
		document.onkeydown = function(event){
			let e = event || window.event || arguments.callee.caller.arguments[0];
			e.preventDefault();
			switch (e.keyCode){
				case 37:  //←
					if(snake.direction != 39){
						snake.direction = 37;
					}
					break;
				case 38:  //↑
					if(snake.direction != 40){
						snake.direction = 38;
					}
					break;
				case 39:  //→
					if(snake.direction != 37){
						snake.direction = 39;
					}
					break;
				case 40:  //↓
					if(snake.direction != 38){
						snake.direction = 40;
					}
					break;
			}
			
		}
		
	</script>
</body>
</html>